<script setup lang="ts">

import {onMounted, ref} from "vue";
import type {Post} from "@/net/controller/post-controller.ts";
import {Carousel, getAllCarousels} from "@/net/controller/carousel-controller.ts";
import {listHotPosts, listLatestPosts, listStarPosts} from "@/net/controller/post-controller.ts";
import PostComponent from "../component/PostComponent.vue";

const carousels = ref<Carousel[]>([])

const starPosts = ref<Post[]>([])
const starPostsTotal = ref(1)
const starPostsCurrentPage = ref(1)

const hotPosts = ref<Post[]>([])
const hotPostsTotal = ref(1)
const hotPostsCurrentPage = ref(1)

const latestPosts = ref<Post[]>([])
const latestPostsTotal = ref(1)
const latestPostsCurrentPage = ref(1)

onMounted(async () => {
  carousels.value = await getAllCarousels()
})

function updateStarPosts(page: number) {
  listStarPosts(page).then((res) => {
    starPosts.value = res.records
    starPostsTotal.value = res.total
  })
}

function updateHotPosts(page: number) {
  listHotPosts(page).then((res) => {
    hotPosts.value = res.records
    hotPostsTotal.value = res.total
  })
}

function updateLatestPosts(page: number) {
  listLatestPosts(page).then((res) => {
    latestPosts.value = res.records
    latestPostsTotal.value = res.total
  })
}

onMounted(() => {
  updateStarPosts(1)
  updateHotPosts(1)
  updateLatestPosts(1)
})

</script>

<template>
  <main>
    <div class="section">
      <el-carousel trigger="click" height="35vh">
        <el-carousel-item v-for="item in carousels" :key="item.carouselId">
          <a :href="item.redirectUrl" target="_blank">
            <img :src="item.imageUrl" alt="" style="width: 100%; height: 100%; object-fit: cover;" />
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="section">
      <p class="section-title">精华帖子</p>

      <PostComponent v-for="(post, index) in starPosts" :post="post" :key="index" />

      <el-pagination layout="prev, pager, next"
                     style="margin-top: 1rem"
                     size="default"
                     :page-size="20"
                     :total="starPostsTotal"
                     v-model:current-page="starPostsCurrentPage"
                     @current-change="updateStarPosts"
      />
    </div>

    <div class="section">
      <p class="section-title">热门帖子</p>

      <PostComponent v-for="(post, index) in hotPosts" :post="post" :key="index" />

      <el-pagination layout="prev, pager, next"
                     style="margin-top: 1rem"
                     size="default"
                     :page-size="20"
                     :total="hotPostsTotal"
                     v-model:current-page="hotPostsCurrentPage"
                     @current-change="updateHotPosts"
      />
    </div>

    <div class="section">
      <p class="section-title">最新帖子</p>

      <PostComponent v-for="(post, index) in latestPosts" :post="post" :key="index" />

      <el-pagination layout="prev, pager, next"
                     style="margin-top: 1rem"
                     size="default"
                     :page-size="20"
                     :total="latestPostsTotal"
                     v-model:current-page="latestPostsCurrentPage"
                     @current-change="updateLatestPosts"
      />
    </div>
  </main>
</template>

<style scoped>
.section {
  margin-top: 2rem;
}

.section-title {
  font-size: 1rem;
  font-weight: bold;
}
</style>